<template>
  <div id="user" style="height: 100%">
    <div style="height: 10%">
      <Header @tellFather="selectTitle" ref="Header"></Header>
    </div>
    <div style="height: 90%">
      <router-view @tellFather="refresh"></router-view>
    </div>
  </div>
</template>

<script>
import Header from "./Header";
export default {
  name: "User",
  components: {
    Header,
  },
  data() {
    return {
      valueSelected: 0,
    };
  },
  methods: {
    selectTitle(value) {
      this.valueSelected = value;
      console.log("选择了", this.valueSelected);
    },
    refresh(data) {
      console.log("刷新了---", data.index);
      this.valueSelected = data.index;
      this.$refs.Header.selectValue(data.index);
    },
  },
  mounted() {
    console.log("刷新了");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
